<!--
 * @FilePath: index.vue
 * @@author: wjj
 * @Date: 2025-04-24 20:34:19
 * @@Description: new js file
-->
<template>
  <!-- svg图标外层节点配合use使用 -->
  <i style="display: flex; align-items: center">
    <svg
      :style="{
        width,
        height,
        marginRight: margin ? margin : LayOutSettingStore.fold ? '0px' : '12px',
      }"
    >
      <!-- xlink:href 使用那个图标 #icon+图标名字-->
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </i>
</template>

<script setup lang="ts">
import useLayOutSettingStore from '@/store/modules/setting'
let LayOutSettingStore = useLayOutSettingStore()
console.log(LayOutSettingStore.fold)
//接受父组件传递过来的参数
defineProps({
  //xlink:href属性值前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  //提供使用的图标名字
  name: String,
  //接受父组件传递颜色
  color: {
    type: String,
    default: '',
  },
  //接受父组件传递过来的图标的宽度
  width: {
    type: String,
    default: '16px',
  },
  //接受父组件传递过来的图标的高度
  height: {
    type: String,
    default: '16px',
  },
  margin: {
    type: String,
    default: '16px',
  },
})
// console.log(ic.name)
// console.log(ic.width)
</script>
<style scope></style>
